<template>
  <div class="login-container">
    <div class="login-header">
      <Image round fit="cover" :src=userStore.avatar></Image>
    </div>
    <div class="login-content">
      <div class="login-title">
        <h4>Welcome to Fitzone</h4>
      </div>
      <div class="login-form">
        <div class="login-form-item">
          <var-icon name="account-circle-outline" />
          <input v-model="form.username" type="email" name="phone" autocomplete="off" placeholder="Please enter your e-mail" />
        </div>
        <div class="login-form-item">
          <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="48" height="48" fill="white" fill-opacity="0.01" />
            <rect x="6" y="22" width="36" height="22" rx="2" fill="none" stroke="#333" stroke-width="4"
              stroke-linejoin="round" />
            <path d="M14 22V14C14 8.47715 18.4772 4 24 4C29.5228 4 34 8.47715 34 14V22" stroke="#333" stroke-width="4"
              stroke-linecap="round" stroke-linejoin="round" />
            <path d="M24 30V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
          <input v-model="form.password" type="password" name="password" autocomplete="off" placeholder="Please enter your password" />
        </div>
      </div>
      <div class="login-forget">
        <p @click="forgetPwd">Forget Password</p>

        <var-popup v-model:show="forget">
          <div class="popup-example-block">
            <el-container>
              <el-main>
                <var-paper :elevation="2" :radius="8" >
                  <var-space direction="column" size="large">
                    <var-cell >
                      <div class="mt-4">
                        <el-input v-model="forget_form.email" type="email" placeholder="Please enter your e-mail"  style="margin: 10px 0; color: #FFF;" @blur="Email_c(forget_form.email)"/>
                        <el-alert title="Valid E-mail" type="error" center :closable="false" effect="dark" v-show="FemailAlert" />
                        <el-input v-model="forget_form.captcha" type="text" placeholder="Please enter your captcha" style="margin: 10px 0; color: #FFF;" maxlength="6" @blur="Captcha_c(forget_form.captcha)"> 
                          <template #append>
                            <el-button @click="Fsend"> Send </el-button>
                          </template>
                        </el-input>
                        <el-alert title="Valid Captcha" type="error" center :closable="false" effect="dark" v-show="FcaptchaAlert" />
                        <el-input v-model="forget_form.password" type="password" placeholder="Please enter your password"  style="margin: 10px 0" show-password @blur="PassWord_c(forget_form.password)"/>
                        <el-alert title="Valid Password" type="error" center :closable="false" effect="dark" v-show="FpwdAlert" />
                        <el-input v-model="forget_form.c_password" type="password" placeholder="Please confirm your password"  style="margin: 10px 0" @blur="CPassWord_c(forget_form.password, forget_form.c_password)"/>
                        <el-alert description="The two password entries should be consistent" type="error" :closable="false" effect="dark" v-show="FcpwdAlert" />
                      </div>
                    </var-cell>
                      <var-button block type="success" @click="submitNewPassWord">Submit</var-button>
                  </var-space>
                </var-paper>
              </el-main>
          </el-container>
          </div>
        </var-popup>







        <var-button block type="success" @click="onLogin" style=" margin-bottom:  10px;">Sign in</var-button>
        <var-button type="primary" block @click="event = true">
          Sign up
        </var-button>
        <var-popup v-model:show="event">
          <div class="popup-example-block">
            <el-container>
              <el-main>
                <var-paper :elevation="2" :radius="8" >
                  <var-space direction="column" size="large">
                    <var-cell >
                      <div class="mt-4">
                        <el-input v-model="signup_form.username" type="text"  placeholder="Please enter your username"   style="margin: 10px 0; color: #FFF;" maxlength="6" @blur="UserName_c(signup_form.username)" />
                        <el-alert title="Valid username" type="error" center :closable="false" effect="dark" v-show="nameAlert" />
                        <el-input v-model="signup_form.email" type="email" placeholder="Please enter your e-mail"  style="margin: 10px 0; color: #FFF;" @blur="Email_c(signup_form.email)"/>
                        <el-alert title="Valid E-mail" type="error" center :closable="false" effect="dark" v-show="emailAlert" />
                        <el-input v-model="signup_form.captcha" type="text" placeholder="Please enter your captcha" style="margin: 10px 0; color: #FFF;" maxlength="6" @blur="Captcha_c(signup_form.captcha)"> 
                          <template #append>
                            <el-button @click="send"> Send </el-button>
                          </template>
                        </el-input>
                        <el-alert title="Valid Captcha" type="error" center :closable="false" effect="dark" v-show="captchaAlert" />
                        <el-input v-model="signup_form.password" type="password" placeholder="Please enter your password"  style="margin: 10px 0" show-password @blur="PassWord_c(signup_form.password)"/>
                        <el-alert title="Valid Password" type="error" center :closable="false" effect="dark" v-show="pwdAlert" />
                        <el-input v-model="signup_form.c_password" type="password" placeholder="Please confirm your password"  style="margin: 10px 0" @blur="CPassWord_c(signup_form.password,signup_form.c_password)"/>
                        <el-alert description="The two password entries should be consistent" type="error" :closable="false" effect="dark" v-show="cpwdAlert" />
                      </div>
                    </var-cell>
                    <var-button block type="success" @click="signup">Sign up</var-button>
                  </var-space>
                </var-paper>
              </el-main>
          </el-container>
          </div>
        </var-popup>
      </div>
      
    </div>
  </div>
</template>

<script setup name="Login">
import { reactive,ref } from "vue";
import { Button, Divider, Dialog, Image } from "vant";
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";
import { StyleProvider, Themes, Snackbar } from '@varlet/ui';
import {ElContainer,ElHeader,ElMain,ElFooter,ElInput} from 'element-plus'; 
import axios from "axios";
StyleProvider(Themes.light)

const router = useRouter();
const userStore = useUserStore();
const event = ref(false)
const forget = ref(false)
const emailAlert = ref(false)
const nameAlert = ref(false)
const pwdAlert = ref(false)
const cpwdAlert = ref(false)
const captchaAlert = ref(false)
const FemailAlert = ref(false)
const FpwdAlert = ref(false)
const FcpwdAlert = ref(false)
const FcaptchaAlert = ref(false)
const getCaptcha = reactive({
  value:""
})
const form = reactive({
  username: "",
  password: "",
});
const signup_form = reactive({
  username: "",
  email:"",
  password: "",
  c_password:'',
  captcha:'',
});
const forget_form = reactive({
  email:"",
  captcha:"",
  password:"",
  c_password:"",
})
function onLogin() {
  userStore.Login(form).then((response) => {
    router.push({path: '/'})
  }).catch((err) => {
    Dialog.alert({message: err});
  })

}
function UserName_c(text){
  if(text.length == 0){
    nameAlert.value = true
  }
  else{
    nameAlert.value = false
  }
}
function Email_c(text){
  const email = text
  var emailRegex = /^([0-9a-zA-Z_\.\-\])+\@([0-9a-zA-Z_\.\-\])+\.([a-zA-Z]+)$/;
  if(!emailRegex.test(email)){
    emailAlert.value = true
  }
  else{
    emailAlert.value = false
  }
}
function PassWord_c(text){
  const pwd = text
  var pwdRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
  console.log(pwdRegex.test(pwd))
  if(!pwdRegex.test(pwd)){
    pwdAlert.value = true
  }
  else{
    pwdAlert.value = false
  }

}
function CPassWord_c(text, ctext){
  const cpwd = ctext
  const pwd = text
  console.log("cpwd is: " + cpwd)
  console.log("pwd is: " + pwd)
  if(cpwd != pwd){
    cpwdAlert.value = true
  }
  else{
    cpwdAlert.value = false
  }
}
function Captcha_c(text){
  if(text.length == 0 || text != getCaptcha.value){
    captchaAlert.value = true
  }
  else{
    captchaAlert.value = false
  }
}
function send(email){
  if(signup_form.email.length != 0){
    axios({
          method:'get',
          baseURL: 'https://fitzone.work:8080/register',
          params:{
          email:email,   
          }
        }).then(res =>{
          console.log(res)
          getCaptcha.value = res.data
        })
  }
  else{
    emailAlert.value = true
  }
}
function signup(){
  if(!(nameAlert.value||emailAlert.value||pwdAlert.value||cpwdAlert.value||captchaAlert.value)){
    axios({
          method:'get',
          baseURL: 'https://fitzone.work:8080/register',
          params:{
          email:signup_form.email,
          captcha:signup_form.captcha,
          user_name:signup_form.username,
          pwd:signup_form.password
          }
        }).then(res =>{
          event.value = false
          Snackbar.success('Sign up successfully!')
        })
  }
}
function forgetPwd(){
  console.log("FORGET!!")
  forget.value = true
}
function Fsend(){
  if(FemailAlert.value != true){
    axios({
          method:'get',
          baseURL: 'https://fitzone.work:8080/forget_pwd',
          params:{
          email:forget_form.email,   
          }
        }).then(res =>{
          console.log(res)
          console.log(forget_form.email+"!!!")
          getCaptcha.value = res.data
        })
  }
  else{
    FemailAlert.value = true
  }
}
function submitNewPassWord(){
  if(!(FemailAlert.value||FpwdAlert.value||FcpwdAlert.value||FcaptchaAlert.value)){
    axios({
          method:'get',
          baseURL: 'https://fitzone.work:8080/update_pwd',
          params:{
          email:forget_form.email,
          captcha:forget_form.captcha,
          pwd:forget_form.password
          }
        }).then(res =>{
          forget.value = false
          Snackbar.success('Password was changed successfully!')
        })
  }
}
</script>

<style>
</style>